<template>
	<view>
		<view class="head-bg-box">
			<image class="head-bg" :src="`${VUE_APP_STATIC_URL}static/images/contribute_header_bg.png`" @click="back"
				mode="widthFix" />
		</view>
		<view class="memberBg" :style="{'padding-top': paddingTop + 'px'}">
			<view class="member-top" :style="{'top': topHeight + 'px'}">
				<view class="memberTopInfo">
					<view class="backBox" @click="back" >
						<image :src="`${VUE_APP_STATIC_URL}static/images/back_img04.png`" class="back" >
						</image>
					</view>
					<view class="memberTit fs30 font-color-FFF">贡献值</view>
				</view>
			</view>
		</view>
		<view class="container flex-center flex-column">
			<view style="height:189rpx"></view>
			<view class="top-container">
				<view class="top-box">
					<image class="top-img" :src="`${VUE_APP_STATIC_URL}static/img/user/fenxiao.png?v1.0.4`"></image>
					<view class="top-title bor-line-F7F7F7">我的今日贡献值: {{balance}}</view>
					<view class="top-release">今日平台实时贡献值{{total}}</view>
				</view>
			</view>
			<view class="withdraw-history">
				<view class="history-list">
					<view class="history-head">
						<view class="head-line"></view>
						<label class="head-label fs30">贡献值明细</label>
					</view>
					<view class="history-content" v-for="(item, index) in historyList" :key="index">
						<view class="withdraw-detail flex-items flex-sp-between">
							<view class="detail-top">
								<view class="detail-bottom">
									<label class="">{{item.createTime}}</label>
								</view>
								<view class="cardNum">
									<label>{{item.bak}}</label>
								</view>
							</view>
							<view>
								<label class="apply-balance" :class="{'on':item.amount>0}">{{item.amount}}个贡献值</label>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		nextTick,
		computed
	} from "vue";
	import {
		request
	} from "@/utils/request";
	import API from "@/config/api";
	import {
		VUE_APP_STATIC_URL
	} from "@/config/api";
	import {
		forEach
	} from "lodash";
	const total = ref(0);
	const balance = ref(0)
	const historyList = ref([]);
	const historyQueryParam = ref({
		pageNum: 1,
		pageSize: 100,
		condition: {
			curType: 8
		}
	})

	const topHeight = ref(10);
	const paddingTop = ref(50);
	onMounted(() => {
		// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
		let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
		topHeight.value = menuButtonInfo.top
		paddingTop.value = paddingTop.value + topHeight.value
		// #endif
		// #ifdef APP
		topHeight.value = 50
		paddingTop.value = 100
		// #endif
		GetUser()
		GetHistoryList()
	})
	const GetUser = async () => {
		try {
			const res = await request(API.GetUser, {}, 'GET')
			const data = res.data
			balance.value = data ? data.contribute : 0
			total.value = data ? data.contribute : 0
		} catch (err) {}
	}
	const GetHistoryList = async () => {
		try {
			const res = await request(API.queryAccountFlowList, historyQueryParam.value, 'POST')
			historyList.value = res.data.list
		} catch (err) {
			console.log(err.message)
		}
	}
	// 返回上一级
	const back = () => {
		uni.navigateBack()
	}
</script>

<style lang="scss">
	page {
		background: var(---, #F3641E);
	}

	.head-bg-box {
		width: 100%;
		align-items: right;
		text-align: right;
		position: fixed;

		.head-bg {
			text-align: right;
			width: 720rpx;
			overflow: hidden;
			position: relative;
		}
	}


	.memberBg {
		background-repeat: no-repeat;
		padding-top: 50rpx;
		position: fixed;
	}

	.memberBox {
		width: 100%;
		//background: #523e3a;
		border-radius: 25rpx;
		background-size: contain;
		position: relative;
		box-sizing: border-box;
	}

	.member-top {
		width: 100%;
		position: fixed;
		z-index: 99;
		left: 0;

		.memberTopInfo {
			position: relative;
			width: 100%;
			height: 60rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.backBox {
				position: absolute;
				left: 10rpx;
				top: 0rpx;

				.back {
					width: 50rpx;
					height: 50rpx;
					padding: 0rpx 10rpx;
				}
			}
			.memberTit{
				
			}
		}
	}

	.container {
		// padding: 20rpx;
		width: 100%;
		height: auto;
		padding-bottom: 48rpx;
		position: absolute;
		z-index: 99;

		.top-container {
			// background: linear-gradient(169.11deg, #F2C4B1 0%, rgba(249, 237, 232, 0) 78.29%);
			padding: 0 30upx;

			.top-box {
				background-color: #F8F8F8;
				border-radius: 18rpx;
				padding: 78rpx 0 56rpx 0;
				text-align: center;

				.top-img {
					width: 170rpx;
					height: 200rpx;
					text-align: center;
					font-size: 32rpx;
					font-weight: 800;
					color: #000;
				}

				.top-title {
					width: 100%;
					text-align: center;
					font-size: 40rpx;
					font-weight: 400;
					margin-top: 24rpx;
					color: #000;
				}

				.top-release {
					margin-top: 22rpx;
					font-size: 32rpx;
					font-weight: 400;
					width: 100%;
					text-align: center;
					color: #828588;
				}

				.top-exchange-coupon {
					width: fit-content;
					font-size: 28rpx;
					margin-top: 20rpx;
					color: #FFF;
					background-color: #FFA100;
					border-radius: 28rpx;
					padding: 10rpx 30rpx 10rpx 30rpx;
				}

				.top-transfer-container {
					width: 100%;
					display: flex;
					flex-direction: row;
					align-items: center;
					vertical-align: bottom;

					.top-transfer-box-left {
						flex: 1;
						text-align: left;

						.top-transfer {
							width: fit-content;
							font-size: 28rpx;
							margin-top: 20rpx;
							color: #b2b2b3;
							border-radius: 28rpx;
							padding: 10rpx 30rpx 10rpx 30rpx;
							border: 1rpx solid #999999;
						}
					}

					.top-transfer-box-right {
						flex: 1;
						text-align: right;
						overflow: hidden;

						.top-transfer-list {
							float: right;
							width: fit-content;
							font-size: 28rpx;
							margin-top: 20rpx;
							color: #b2b2b3;
							border-radius: 28rpx;
							padding: 10rpx 30rpx 10rpx 30rpx;
							border: 1rpx solid #999999;
						}
					}
				}
			}
		}

		.withdraw-history {
			margin: 14rpx 30rpx;

			.history-list {
				background: white;
				border-radius: 18rpx;
				padding: 30rpx;
				height: 30%;

				.history-head {
					flex-direction: row;
					display: flex;

					.head-line {
						width: 10rpx;
						background-color: #000;
						display: none;
					}

					.head-label {
						margin-left: 10rpx;
						color: #000;
					}
				}

				.history-content {
					border-top: 2rpx solid #F3F4F5;

					.withdraw-detail {
						height: 150rpx;

						.apply-balance {
							font-size: 28rpx;
							font-weight: 600;
							background: #EEEEEE;
							display: block;
							text-align: center;
							color: #F3641E;

							&.on {
								color: #2FAB73;
							}
						}

						.detail-top {
							padding: 32rpx 0;

							.detail-bottom {
								color: #000;
								font-size: 28rpx;
								font-weight: 400;
							}

							.cardNum {
								color: #828588;
								font-size: 24rpx;
								font-weight: 400;
								margin-top: 10rpx;
							}
						}

					}
				}
			}
		}
	}

	.content {
		font-size: 35rpx;
		width: 500rpx;

		.btn {
			margin-bottom: 20rpx;
			width: 200rpx;
			background-image: linear-gradient(135deg, #FFA100 10%, #FF7911 100%);
		}
	}
</style>